import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHistory } from 'vue-router'
import HomePage from '@/pages/HomePage.vue'
import AboutPage from '@/pages/AboutPage.vue'
import NewsPage from '@/pages/NewsPage.vue'
import NewsDetails1 from '@/pages/NewsDetails1.vue'

import NewsDetails2 from '@/pages/NewsDetails2.vue'



//1.配置路由规则
const routes = [
    { path: "/home", component: HomePage },
    { path: "/about", component: AboutPage },
    {
        path: "/news", component: NewsPage, name: 'news',
        children: [
            {
                // 这里最好写相对路径
                path: "1",  // /news/1
                component: NewsDetails1
            },
            {
                name: "xinwen2",
                path: "2/:id/:title/:content?",  // /news/2/1/t1/c1
                component: NewsDetails2
            }
        ]
    },
]

//2.创建路由器 可以直接用createRouter
const router = createRouter({
    history: createWebHistory(), // 路由工作模式
    routes
})

//3.加载路由器
const app = createApp(App)
app.use(router)

import { createPinia } from 'pinia'

const pinia = createPinia()
app.use(pinia)

import ElementPlus from 'element-plus'
// 可以用它的css
import 'element-plus/dist/index.css'
app.use(ElementPlus)

app.mount('#app')
